<!-- 首页品牌案例-案例 -->
<template>
	<view>
		<view class="tab">
			<view class="item" v-for="(item,itemIndex) in tabList" :key="itemIndex" @tap="onTapItem(item, itemIndex)">
				<view :class="[{ active: itemIndex === activeIndex },'grid']">{{ item.label }}</view>
			</view>
		</view>

		<view class="interval"></view>

		<view class="selVi">

			<view v-if="activeIndex === 0 ||activeIndex === 3" class="additem">

				<view class="typeSelect1">
					<view class="uni-list-cell-db">
						<picker @change="bindCarTypeChange" :value="carTypeIndex" :range="carType">
							<view class="uni-input">
								{{carType[carTypeIndex]}}
								<u-icon name="arrow-down-fill" color="#ddddde" size="18"></u-icon>

							</view>
						</picker>
					</view>

				</view>

				<view class="typeSelect1">
					<view class="uni-list-cell-db">
						<picker @change="bindCarColorSerialChange" :value="carColorSerialIndex" :range="carColorSerial">
							<view class="uni-input">
								{{carColorSerial[carColorSerialIndex]}}
								<u-icon name="arrow-down-fill" color="#ddddde" size="18"></u-icon>
							</view>
						</picker>
					</view>

				</view>

				<view class="typeSelect1">
					<view class="uni-list-cell-db">
						<picker @change="bindCarColorColorChange" :value="carColorColorIndex" :range="carColorColor">
							<view class="uni-input">
								{{carColorColor[carColorColorIndex]}}
								<u-icon name="arrow-down-fill" color="#ddddde" size="18"></u-icon>
							</view>
						</picker>
					</view>

				</view>

			</view>

			<view v-if="activeIndex === 1" class="additem">
				<view class="typeSelect2">
					<view class="uni-list-cell-db">
						<picker @change="bindCarTypeChange" :value="carTypeIndex" :range="carType">
							<view class="uni-input">
								{{carType[carTypeIndex]}}
								<u-icon name="arrow-down-fill" color="#ddddde" size="18"></u-icon>
							</view>
						</picker>
					</view>

				</view>
				<view class="typeSelect2">
					<view class="uni-list-cell-db">
						<picker @change="bindPpfSerialChange" :value="carPpfSerialIndex" :range="carPpfSerial">
							<view class="uni-input">
								{{carPpfSerial[carPpfSerialIndex]}}
								<u-icon name="arrow-down-fill" color="#ddddde" size="18"></u-icon>
							</view>
						</picker>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CaseHeader',
		components: {},
		data() {
			return {
				activeIndex: 0,
				activeItem: {},
				param: {
					type: '',
					product: '',
					color: '',
				},
				carTypeIndex: 0,
				carColorSerialIndex: 0,
				carColorColorIndex: 0,
				carPpfSerialIndex: 0,
				loading: false,
				tabList: [{
						label: '修色膜案例',
						icon: 'thumb-up',
						activeIcon: 'thumb-up-fill',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					},
					{
						label: '漆面膜案例',
						icon: 'star',
						activeIcon: 'star-fill',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					},
					{
						label: '其他案例',
						icon: 'more-circle',
						activeIcon: 'more-circle-fill',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					},
					{
						label: '颜色定制',
						icon: 'integral',
						activeIcon: 'integral-fill',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					}
				],
				banner: [],
				carType: ['所有车型', '奥迪', '阿尔法·罗密欧', '阿斯顿·马丁', '宝马', '保时捷', '奔驰', '本田', '比亚迪', '标致', '别克', '宾利', '布加迪', '大众',
					'道奇', '法拉利', '丰田', '福特', '广汽传祺', '哈弗', '悍马', '红旗', 'Jeep', '捷豹', '凯迪拉克', '科尼赛克', '克莱斯勒', '兰博基尼',
					'劳斯莱斯', '雷克萨斯', '雷诺', '理想汽车', '林肯', '铃木', '零跑', '领克', '路虎', '路特斯', 'MINI', '马自达', '玛莎拉蒂', '迈凯伦',
					'讴歌', '欧拉', '帕加尼', '起亚', '日产', 'smart', '三菱', '斯巴鲁', '斯柯达', '特斯拉', 'WEY', '蔚来', '沃尔沃', '五菱', '现代',
					'小鹏汽车', '雪佛兰', '雪铁龙', '英菲尼迪', '东风', '其他'
				],
				carColorSerial: ['所有系列', 'α系列', '喷绘定制系列', '原厂定制系列', '水晶系列', '电光陶瓷系列', '电光金属系列', '幽灵电镀系列', '超亮金属系列',
					'PET钢琴系列', '幽灵金属系列', '重金属系列', '缎面系列', '珊瑚系列', '幻影系列', '七彩镭射系列', '变色龙系列', '璀璨系列', '自修复系列', '马卡龙系列',
					'超亚系列', '珠光系列', '金属拉丝系列', '星际|磨砂系列', '金钻系列', '星光钻石系列', '流光溢彩系列', '特效系列', '超级变色龙梦幻星河', '闪钻系列',
					'白变色系列', '双层金沙系列', '曙光白', '爆闪系列', '镜面电镀系列', '彩虹电镀系列', '铂金系列', '3D幽灵迷彩系列', '极光系列', '绸缎系列', '其他'
				],
				carColorColor: ['所有颜色', '黑色', '白色', '灰色', '银色', '红色', '橙色', '黄色', '绿色', '蓝色', '紫色', '粉色', '棕色', '蒂芙尼',
					'金色', '玫瑰金', '特效色', '其他'
				],
				carPpfSerial: ['所有系列', '红宝石系列·朱雀', '红宝石系列·青鸾', '红宝石系列·火凤', '红宝石系列·青龙', '蓝宝石系列·精卫', '蓝宝石系列·玄鸟', '蓝宝石系列·孔雀',
					'其他'
				],


			}
		},
		mounted() {
		},
		onReady() {},
		methods: {
			onTapItem(item, itemIndex) {
				this.activeItem = item;
				this.activeIndex = itemIndex;
				// this.param.type='';
				this.param.product = '';
				this.param.color = '';
				this.$emit('onTapItem', item, itemIndex + 1, this.param);
				// uni.navigateTo({
				// 	url: '/pages/car/caseCategory'
				// })
			},
			async getRotationImg() {
				this.loading = true;
				let res = await this.$api.getRotationImg();
				this.loading = false;
				if (!res.success) {
					return;
				}
				this.banner = res.result;
			},
			bindCarTypeChange(e) {
				this.carTypeIndex = e.detail.value
				this.param.type = this.carType[e.detail.value];
				this.$emit('onTapItem', this.activeItem, this.activeIndex + 1, this.param);
			},
			bindCarColorSerialChange(e) {
				this.carColorSerialIndex = e.detail.value
				this.param.product = this.carColorSerial[e.detail.value]
				this.$emit('onTapItem', this.activeItem, this.activeIndex + 1, this.param);
			},
			bindCarColorColorChange(e) {
				this.carColorColorIndex = e.detail.value
				this.param.color = this.carColorColor[e.detail.value]
				this.$emit('onTapItem', this.activeItem, this.activeIndex + 1, this.param);
			},
			bindPpfSerialChange(e) {
				this.ppfSerialIndex = e.detail.value
				this.param.product = this.carPpfSerial[e.detail.value]
				this.$emit('onTapItem', this.activeItem, this.activeIndex + 1, this.param);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		background-color: #FFFFFF;
		display: flex;
		text-align: center;
		font-size: 28rpx;
		height: 88rpx;
		padding: 0rpx;
		font-family: PingFang SC-Regular;

		.item {
			flex: 1;
			flex-shrink: 0;
			padding: 0rpx;
			margin: 0rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #000000;

			.grid {
				padding: 24rpx 0rpx 24rpx 0rpx;

				&.active {
					color: #000000;
					font-weight: bold;
					border-bottom: 7rpx solid #FBCB11;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
				}
			}

		}
	}

	page {
		.uni-picker {
			font-size: 28rpx;
		}
	}

	.interval {
		height: 9rpx;
		background-color: #F7F8FA;
	}

	.selVi {
		height: 96rpx;
		display: inline;
		background-color: #FFFFFF;
	}

	.additem {
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}

	.typeSelect1 {
		text-align: center;
		width: 33.33%; //每个元素宽度占比父类的三分之一
		height: 96rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
	}

	.typeSelect2 {
		text-align: center;
		width: 50%;
		height: 96rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
	}

	.uni-input {
		margin: 31rpx;
	}

	
</style>